<template>
  <view class="content">
    <view class="header">
      <view class="headPhoto">
      </view>
      <view class="userName">
        陶马坦
      </view>
      <view class="resume">
        <view class="preview">
          预览简历
        </view>
        <view class="modification">
          修改简历
        </view>
      </view>
    </view>
    <view class="integrity">
      <view class="tit">
        简历完整度
      </view>
      <view class="pmgressbar">
        <text></text>
      </view>
      <view class="integrity_r">
        50%
      </view>
      <view class="more">
        >
      </view>
    </view>
    <view class="collect">
      <view class="collect_l">
        <view class="ico">
          <image src="http://120.77.212.166/h5/dist/img/icon_zhiweishoucang.png" mode=""></image>
        </view>
        <view class="collect-n">
          职位收藏
        </view>
      </view>
      <view class="more">
        >
      </view>
    </view>
    <view class="collect">
      <view class="collect_l">
        <view class="ico">
          <image src="http://120.77.212.166/h5/dist/img/icon_toudizhuangtai.png" mode=""></image>
        </view>
        <view class="collect-n">
          投递记录
        </view>
      </view>
      <view class="more">
        >
      </view>
    </view>
    <view class="collect">
      <view class="collect_l">
        <view class="ico">
          <image src="http://120.77.212.166/h5/dist/img/icon_shiyongbangzhu.png" mode=""></image>
        </view>
        <view class="collect-n">
          使用帮助
        </view>
      </view>
      <view class="more">
        >
      </view>
    </view>
    <view class="login">
      <view class="yinying">
        
      </view>
      <view class="login_info">
        <view class="from">
          <view class="title">
            验证码登录
          </view>
          <input class="mobile" type="text" value="" placeholder="请输入手机号" />
          <view class="verify">
            <input class="verify_l" type="text" placeholder="请输入验证码" />
            <view class="gain">获取验证码</view>
          </view>
          <view class="submit" type="text" @click="login">登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    login() {
      uni.showToast({
        title:'sb点我干嘛'
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .content {
    background-color: #F1F1F1;
    .header {
      width: 100%;
      height: 400rpx;
      background-color: #2E90F3;
      overflow: hidden;
      .headPhoto {
        border: 2px solid #fff;
        margin: 54rpx auto 36rpx;
        width:150rpx;
        height:150rpx;
        border-radius:50%;
      }
      .userName {
        height:34rpx;
        font-size:36rpx;
        text-align: center;
        font-weight:500;
        color: #fff;
        line-height:34rpx;
        margin-bottom: 29rpx;
      }
      .resume {
        height:66px;
        display: flex;
        justify-content: space-between;
        padding: 0 68rpx;
        .preview,
        .modification {
          width:240rpx;
          height:66rpx;
          border:2rpx solid rgba(255,255,255,1);
          border-radius:33rpx;
          color: #FFFFFF;
          font-size: 30rpx;
          line-height: 66rpx;
          text-align: center;
          font-weight:500;
        }
      }
    }
    .integrity {
      display: flex;
      align-items: center;
      width: 750rpx;
      height: 120rpx;
      background-color: #FFFFFF;
      line-height: 120rpx;
      margin-bottom: 11rpx;
      .tit {
        margin: 0 31rpx 0 21rpx;
        font-size:30rpx;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
      .pmgressbar {
        width: 400rpx;
        height: 10rpx;
        background-color: #DDDDDD;
        text {
          display:block;
          width: 50%;
          height: 100%;
          background-color: #2E90F3;
        }
      }
      .integrity_r {
        font-size:30rpx;
        font-weight:500;
        color:rgba(51,51,51,1);
        margin: 0 21rpx;
      }
      .more {
        color: #DDDDDD;
      }
    }
    
    .collect {
      height: 90rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx 0 24rpx;
      margin-top: 11rpx;
      background-color: #fff;
      .collect_l {
        display: flex;
        align-items: center;
        .ico {
          height: 46rpx;
          width: 46rpx;
          margin-right:35rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .collect-n {
          width: 120rpx;
          color: #333333;
          font-size:30rpx;
        }
      }
      
      .more {
        color: #DDDDDD;
        margin-left: 481rpx;
      }
    }
    
    .login {
      .yinying {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background:rgba(0,0,0, .3);
      }
      .login_info {
        position: absolute;
        left: 50rpx;
        top: 284rpx;
        position: ;
        width: 650rpx;
        height: 500rpx;
        background-color: #FFFFFF;
        border-radius: 10rpx;
        .from {
          width: 100%;
          height: 436rpx;
          padding: 0 30rpx;
          .title {
            height:32rpx;
            font-size:34rpx;
            font-weight:500;
            color:rgba(0,0,0,1);
            line-height:32rpx;
            text-align: center;
            margin: 28rpx 0 42rpx 0;
          }
          .mobile,
          .verify_l {
            height: 88rpx;
            border: 1px solid rgba(221,221,221,1);
            background: url(http://120.77.212.166/h5/dist/img/icon_phone.png) no-repeat 30rpx center;
            background-size: 28rpx 42rpx;
            padding-left: 88rpx;
            border-radius:6rpx;
          }
          .verify {
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;
            .verify_l {
              background: url(http://120.77.212.166/h5/dist/img/icon_code.png) no-repeat 30rpx center;
              background-size: 28rpx 33rpx;
              width: 350rpx;
            }
            .gain {
              height: 88rpx;
              border:1px solid rgba(46,144,243,1);
              width:200rpx;
              border-radius:6rpx;
              font-size:30rpx;
              font-weight:500;
              color:rgba(46,144,243,1);
              line-height:88rpx;
              text-align: center;
            }
          }
          .submit {
            margin-top: 50rpx;
            height:88rpx;
            background:rgba(46,144,243,1);
            border-radius:6rpx;
            font-size:34rpx;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-align: center;
            line-height: 88rpx;
          }
          
        }
      }
    }
  }
</style>
